import React, { useEffect, useState } from 'react';
import { Space, Switch, Table, Button, Form, Input, Select } from "antd";
import { getHospitalList, getHospitalUpdateStatus } from "@/api/hosp";
import { useNavigate } from "react-router-dom";
import { getFindByParentId } from "@/api/dict";
const { Item } = Form;
// const {Option} = Select;
function Index() {
    // 定义保存医院列表的数据状态
    const [hospitalList, setHospitalList] = useState([]);
    // 定义保存页码信息的数据状态
    const [pageInfo, setPageInfo] = useState({
        current: 1,
        pageSize: 1,
        total: 1
    })
    // 保存医院类别列表状态
    const [hostypeList, setHostypeList] = useState([]);
    // 保存省份列表
    const [provinceCodeList, setProvinceCodeList] = useState();
    const [form] = Form.useForm();
    // 加载中
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
    const getHospitalListAsync = async function (current: number = 1, pageSize: number = 4) {
        setLoading(true);
        const { data } = await getHospitalList(current, pageSize, form.getFieldsValue());
        setHospitalList(data.content);
        setPageInfo({
            current: data.number + 1,
            pageSize: data.size,
            total: data.totalElements
        })
        setLoading(false);



    }
    useEffect(() => {
        getHospitalListAsync();
        // 获取医院等级列表
        getFindByParentId(10000).then(value => {
            // console.log(value);
            setHostypeList(value.data);
        })
        //获取省份列表
        getFindByParentId(86).then(value => {
            setProvinceCodeList(value.data)
        })
    }, [])


    return (
        <div id={"content"}>
            <div style={{ marginBottom: "16px" }}>
                <Form layout={"inline"} form={form} autoComplete={"off"}>
                    {/* 省份搜索框 */}
                    <Item name={"provinceCode"}>
                        <Select
                            placeholder={'请选择省份'}
                        >

                        </Select>
                    </Item>

                    <Item name={"hosname"}>
                        <Input placeholder={"请输入医院名称"} />
                    </Item>
                    <Item name={"hoscode"}>
                        <Input placeholder={"请输入医院编号"} />
                    </Item>
                    <Item name={"ho stype"}>
                        <Select placeholder={"医院类型"}>
                            {
                                hostypeList.map((item: any) => (
                                    <Select.Option key={item.id} value={item.value}>{item.name}</Select.Option>
                                ))
                            }

                        </Select>
                    </Item>
                    <Item name={"status"}>
                        <Select placeholder={"是否上线"}>
                            <Select.Option value={"1"}>已上线</Select.Option>
                            <Select.Option value={"0"}>未上线</Select.Option>
                        </Select>
                    </Item>
                    <Item>
                        <Button onClick={e => {
                            getHospitalListAsync()
                        }}>搜索</Button>
                    </Item>
                    <Item>
                        <Button onClick={e => {
                            form.resetFields();
                            getHospitalListAsync()
                        }}>重置</Button>
                    </Item>
                </Form>
            </div>
            <Table
                loading={loading}
                pagination={{
                    ...pageInfo,
                    // onChange(current,pageSize){
                    //     // console.log(current,pageSize);
                    //     getHospitalListAsync(current,pageSize);
                    // },
                    // 以上代码同以上代码作用相同
                    onChange: getHospitalListAsync

                }}
                scroll={{ x: 1500 }}
                rowKey={"id"}
                bordered={true}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(value, rows, index) {
                            return (pageInfo.current - 1) * pageInfo.pageSize + index + 1;
                        }
                    }, {
                        title: "医院名称",
                        align: "center",
                        dataIndex: "hosname"
                    }, {
                        title: "医院编号",
                        align: "center",
                        dataIndex: "hoscode"
                    }, {
                        title: "医院LOGO",
                        align: "center",
                        dataIndex: "logoData",
                        render(logoData) {
                            return (
                                <img height={50} src={"data:image/png;base64," + logoData} alt="" />
                            )
                        }
                    }, {
                        title: "是否上线",
                        align: "center",
                        dataIndex: "status",
                        // （0：未上线 1：已上线）
                        render(status, rows: any) {
                            return (
                                <Switch onChange={async () => {
                                    await getHospitalUpdateStatus(rows.id, status === 0 ? 1 : 0);
                                    await getHospitalListAsync(pageInfo.current);
                                }} checked={status === 1} />
                            )
                        }
                    }, {
                        title: "医院等级",
                        align: "center",
                        dataIndex: "param",
                        render(param) {
                            return param.hostypeString;
                        }
                    }, {
                        title: "医院地址",
                        align: "center",
                        dataIndex: "param",
                        render(param) {
                            return param.fullAddress;
                        }
                    }, {
                        title: "创建时间",
                        align: "center",
                        dataIndex: "createTime"
                    }, {
                        title: "操作",
                        align: "center",
                        fixed: "right",
                        dataIndex: "id",
                        render(id, rows: any) {
                            return (
                                <Space>
                                    <Button onClick={() => navigate("/hospital/show/" + id)} type={"primary"}>查看</Button>
                                    <Button type={"primary"} onClick={() => navigate("/hospital/department/" + rows.hoscode)}>排班</Button>
                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospitalList}
            />
        </div>
    );
}

export default Index;